<template>
  <div class="banner-container">
    <div class="query-content">
      <el-form
        ref="queryForm"
        class="queryform"
        :inline="true"
        label-width="100px"
        :model="queryForm"
        size="small"
        @submit.native.prevent
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="用户姓名:">
                  <el-input
                    v-model.trim="queryForm.username"
                    clearable
                    placeholder="请输入用户姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="用户昵称:">
                  <el-input
                    v-model.trim="queryForm.nickname"
                    clearable
                    placeholder="请输入用户昵称"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="用户电话:">
                  <el-input
                    v-model.trim="queryForm.mobile"
                    clearable
                    placeholder="请输入电话"
                  />
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
          <template v-if="!fold">
            <el-col :span="18">
              <el-col v-bind="grid">
                <el-form-item label="UID:">
                  <el-input
                    v-model.trim="queryForm.id"
                    clearable
                    placeholder="请输入用户ID"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="身份证号:">
                  <el-input
                    v-model.trim="queryForm.id_card"
                    clearable
                    placeholder="请输入身份证号"
                  />
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="状态:">
                  <el-radio-group v-model="queryForm.state" size="small">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="1">正常</el-radio-button>
                    <el-radio-button label="2">禁用</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-col>
          </template>
          <el-col class="query-search" :span="6">
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
            <el-button @click="resetForm('queryForm')">重置</el-button>
            <el-button type="text" @click="fold = !fold">
              <span>{{ fold ? '展开' : '合并' }}</span>
              <vab-icon
                class="vab-dropdown"
                :class="{ 'vab-dropdown-active': fold }"
                icon="arrow-up-s-line"
              />
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      highlight-row
      :row-style="iRowStyle"
    >
      <el-table-column
        align="center"
        label="ID"
        prop="id"
        show-overflow-tooltip
        width="55"
      />
      <el-table-column
        align="center"
        label="用户名"
        prop="username"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="昵称"
        prop="nickname"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="头像">
        <template #default="{ row }">
          <el-image class="user-avatar" :src="row.avatar" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="电话"
        prop="mobile"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="角色" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.guard == 1 ? '管理员' : '普通用户' }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="电子邮箱"
        prop="email"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="身份证号"
        prop="id_card"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="性别"
        prop="gender"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="下载次数"
        prop="api_count"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="积分"
        prop="score"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="状态"
        prop="state"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag :type="row.state == 2 ? 'info' : ''">
            {{ row.state == 2 ? '禁用' : '正常' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="注册时间"
        prop="created_at"
        show-overflow-tooltip
        width="150"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="140"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" @click="handleState(row)">
            {{ row.state == 1 ? '禁用' : '恢复' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" />
  </div>
</template>

<script>
  import { getList, doDelete, doEdit } from '@/api/userMessage'
  import Edit from './components/Edit'
  export default {
    name: 'User',
    components: { Edit },
    data() {
      return {
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24,
        },
        list: [],
        listLoading: true,
        fold: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          id: '',
          username: '',
          nickname: '',
          mobile: '',
          id_card: '',
          state: '',
          pageNo: 1,
          pageSize: 20,
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      iRowStyle: function () {
        return 'height:25px'
      },
      handleInfo(row) {
        this.$refs['info'].showEdit(row)
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doDelete({ ids: row.id })
            this.$baseMessage(
              message,
              'success',
              false,
              'vab-hey-message-success'
            )
            await this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { message } = await doDelete({ ids })
              this.$baseMessage(
                message,
                'success',
                false,
                'vab-hey-message-success'
              )
              await this.fetchData()
            })
          } else {
            this.$baseMessage(
              '未选中任何行',
              'error',
              false,
              'vab-hey-message-error'
            )
          }
        }
      },
      handleState(row) {
        let form = {
          id: row.id,
          state: row.state == 2 ? 1 : 2,
        }
        let msg = row.state == 2 ? '恢复' : '禁用'
        this.$baseConfirm('你确定要' + msg + '当前账号吗?', null, async () => {
          const { message } = await doEdit(form)
          this.$baseMessage(
            message,
            'success',
            false,
            'vab-hey-message-success'
          )
          await this.fetchData()
        })
      },
      resetForm() {
        this.queryForm = {
          id: '',
          username: '',
          nickname: '',
          mobile: '',
          id_card: '',
          state: '',
          pageNo: 1,
          pageSize: 10,
        }
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        console.log('userfetch')
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        const { list, total } = data
        this.list = list
        this.total = total
        this.listLoading = false
      },
    },
  }
</script>
<style>
  .query-content {
  }
  .query-search {
    text-align: right;
  }
</style>
